<template>
  <div class="warningMap">
    <div id="mapContainer" class="mapContainer"></div>
    <div class="breadcrumb">
      <div class="province" @click="sdAll">山东</div>
      <div v-show="cityStatus" style="margin: 0 5px">&gt;</div>
      <div v-show="cityStatus" class="city">{{ selectCityName }}</div>
    </div>
  </div>
</template>

<script>
import AMap from 'AMap'
import SDJSON from '../json/SDJSON'
import coordinate from '../json/coordinate'

export default {
  name: 'WarningMap',
  data() {
    return {
      map: null,
      cityStatus: false,
      selectCityName: ''

    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initMap()
      this.drawArea()
    })
  },
  methods: {
    initMap() {
      const map = new AMap.Map('mapContainer', {
        resizeEnable: true,
        center: [117.000923, 36.675807],
        zoom: 7
      })
      this.map = map
      this.addMarker()
    },
    sdAll() {
      this.cityStatus = false
      this.map.clearMap() // 删除地图上所有的覆盖物
      this.drawArea()
      this.addMarker()
      this.map.setCenter([118.37769, 36.45222]) // 设置地图显示的中心点
      this.map.setZoom(8) // 设置地图显示的缩放级别
    },
    // 点标记
    addMarker() {
      const cityPosition = coordinate
      for (let i = 0; i < cityPosition.length; i++) {
        const marker = new AMap.Marker({
          position: new AMap.LngLat(cityPosition[i].log, cityPosition[i].lat),
          offset: new AMap.Pixel(-10, -10),
          //   icon: '//vdata.amap.com/icons/b18/1/2.png', // 添加 Icon 图标 URL
          title: cityPosition[i].name
        })
        // 信息窗体
        var content = `
        <div class="infoWin">
          <div class="name">1号排口</div>
          <div class="info">
            <div class="left">
            <div>市中区</div>
            <div>2020-01-01 11:25</div>
            </div>
            <div class="right">
              <div>详情</div>
            </div>
          </div>
          <div class="status">
            <div class="item">
              <div>水质</div>
              <div>正常</div>
            </div>
            <div class="item">
              <div>控制模式</div>
              <div>自动</div>
            </div>
            <div class="item">
              <div>雨水排口</div>
              <div>打开</div>
            </div>
            <div class="item">
              <div>污水排口</div>
              <div>关闭</div>
            </div>
           </div>
          <div class="project">
            <div class="item">COD</div>
            <div class="item">氨氮</div>
            <div class="item">PH</div>
          </div>
        </div>
        `
        const text = new AMap.Text({
          text: cityPosition[i].name,
          anchor: 'right', // 设置文本标记锚点
          draggable: false,
          cursor: 'pointer',
          offset: new AMap.Pixel(33, 0),
          style: {
            'background-color': 'transparent',
            'width': '60px',
            'border-width': 0,
            'text-align': 'center',
            'font-size': '12px',
            color: 'pink'
          },
          position: [cityPosition[i].log, cityPosition[i].lat]
        })
        marker.content = content
        marker.cityCode = cityPosition[i].cityCode
        text.cityCode = cityPosition[i].cityCode
        text.selectCityName = cityPosition[i].name
        this.map.add(marker)
        text.setMap(this.map)
        marker.on('click', this.infoOpen)
        text.on('click', this.textOpen)
      }
    },
    textOpen(e) {
      this.cityStatus = true
      this.drawArea(e.target.cityCode)
      this.selectCityName = e.target.selectCityName
    },
    // 地图弹框
    infoOpen(e) {
      var infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -10) })
      infoWindow.setContent(e.target.content)
      infoWindow.open(this.map, e.target.getPosition())
    },
    // 边界
    drawArea(cityCode) {
      this.map.clearMap()// 删除地图上所有的覆盖物
      this.addMarker()
      const that = this
      if (that.polygon) {
        that.map.remove(that.polygon)// 删除覆盖物/图层
      }
      AMap.plugin('AMap.DistrictSearch', function() {
        new AMap.DistrictSearch({ // 行政区查询服务
          extensions: 'all',
          subdistrict: 0
        }).search(cityCode || '370000', function(status, result) {
          // 外多边形坐标数组和内多边形坐标数组
          const outer = [
            new AMap.LngLat(-360, 90, true), // 地理坐标类
            new AMap.LngLat(-360, -90, true),
            new AMap.LngLat(360, -90, true),
            new AMap.LngLat(360, 90, true)
          ]
          const holes = result.districtList[0].boundaries
          const pathArray = [outer]
          pathArray.push.apply(pathArray, holes)
          that.polygon = new AMap.Polygon({ // 覆盖物>多边形
            pathL: pathArray,
            strokeColor: '#bb2dcb', // 城市边界颜色
            strokeWeight: 3,
            fillColor: '#09104D', // 遮罩背景色黑色
            fillOpacity: 0
          })
          that.polygon.setPath(pathArray)
          that.map.add(that.polygon)
        })
      })
      const json1 = SDJSON.features
      json1.forEach((item) => {
        const properties = item.properties // 市信息
        if (properties.adcode == cityCode) {
          this.map.setCenter([properties.center[0], properties.center[1]])
          this.map.setZoom(9)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.warningMap {
  width: 100%;
  height: 100%;

  .mapContainer {
    width: 100%;
    height: 100%;
  }

  .breadcrumb {
    width: 400px;
    height: 90px;
    display: flex;
    justify-content: flex-start;
    position: absolute;
    font-weight: bold;
    top: 30px;
    left: 30px;

    .province {
      cursor: pointer;
    }
  }
}

::v-deep .amap-logo {
  display: none !important;
}

::v-deep .amap-copyright {
  display: none !important;
}

::v-deep .amap-info-content {
  width: 460px;
  height: 360px;
  border-radius: 32px;
  background: linear-gradient(180deg, #015196, #355FD2);

  .infoWin {
    width: 100%;
    height: 100%;
    padding: 10px;
    .name {
      font-size: 18px;
      color: #FFFFFF;
      margin-top: 5px;
      margin-bottom: 20px;
    }
    .info {
      width: 100%;
      padding-bottom:10px;
      border-bottom: 1px solid #FFFFFF;
      margin: 20px 0;
      display: flex;
      justify-content: space-between;
      .left {
        line-height: 1.5;
        color: #FFFFFF;
      }
      .right {
        div {
          padding: 10px 30px;
          border-radius: 20px;
          cursor: pointer;
          background: #04BDFE;
          color: #FFFFFF;
        }
      }
    }
    .status {
      width: 100%;
      display: flex;
      justify-content: space-between;
      .item {
        text-align: center;
        width: 23%;
        div:nth-child(1) {
          padding: 5px 10px;
          background: #3A86EF;
          color: #FFFFFF;
          margin-bottom: 20px;
        }
        div:nth-child(2) {
          color: #FFFFFF;
          font-size: 18px;
          margin-bottom: 20px;
        }
      }
    }
    .project {
      text-align: center;
      width: 100%;
      display: flex;
      justify-content: space-between;
      .item {
        width: 30%;
        padding: 5px 10px;
        background: #3A86EF;
        color: #FFFFFF;
      }
    }
  }

  .amap-info-close {
    position: absolute;
    top: 16px;
    right: 20px !important;
  }
}

::v-deep .bottom-center .amap-info-sharp {
  bottom: 0;
  left: 50%;
  margin-left: -8px;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #355FD2;
}
</style>
